<template>
	<view class="content">
		<scroll-view scroll-y="true" class="main">
				<view class="items def" v-for="(item,index) of list" v-if="index === 0">
					<view class="item">
						<view class="top_box">
							<view class="address">{{item.province}}{{item.city}}{{item.district}}{{item.address}}</view>
							<view class="name">{{item.name}} {{item.mobile}}</view>
						</view>
						<view class="bottom_box">
							<view class="l">默认地址</view>
							<view class="r" @click="change(item)">
								<text style="color: #00CE9B;">修改</text>
								<!-- <image src="/static/pages_technician/right_grey.png" mode=""></image> -->
							</view>
						</view>
					</view>
				</view>
				<view class="items" v-if="list.length > 1">
					<view class="title">其他地址</view>
					<view class="item" v-for="(item,index) of list" v-if="index > 0">
						<view class="top_box">
							<view class="address">{{item.province}}{{item.city}}{{item.district}}{{item.address}}</view>
							<view class="name">{{item.name}} {{item.mobile}}</view>
						</view>
						<view class="bottom_box">
							<view class="l" @click="changestate(item)">设为默认地址</view>
							<view class="r"  @click="change(item)">
								<text>修改</text>
								<!-- <image src="/static/pages_technician/right_grey.png" mode=""></image> -->
							</view>
						</view>
					</view>
				</view>
				<u-empty mode="list" v-if="finish && list.length === 0" style="margin-top: 200rpx;" icon="/static/none.png">
						</u-empty>
		</scroll-view>
		<view class="submit-btn" @click="$goTo('/pages_my/addnewaddress/addnewaddress')">
			新增地址
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				finish: false,
				list: [],
			}
		},
		mounted() {
			this.getList()
			uni.$on('addressChange',()=>{
				this.reload()
			})
		},
		onShow() {
			
		},
		methods: {
			changestate(item){
				this.$api.post('/address', {
					type: 'edit',
					id: item.id,
					state: 1
				}).then(res => {
					if (res.code == 1) {
						this.reload()
					}
				}).catch((res) => {
				
				})
			},
			change(item){
				this.$goTo('/pages_my/addnewaddress/addnewaddress?info='+JSON.stringify(item))
			},
			reload() {
				this.page = 1
				this.list = []
				this.finish = false
				this.getList()
			},
			more() {
				this.page++
				this.getList()
			},
			getList() {
				if (this.finish) {
					return
				}
				this.$api.post('/address', {
					page: this.page,
				}).then(res => {
					if (res.code == 1) {
						this.list = this.list.concat(res.data)
						if (res.data.length === 0) {
							this.finish = true
						}
					}
				}).catch((res) => {
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
page{
	background: #F7F7FA;
}
.content{
	height: calc(100vh - var(--window-bottom) - var(--window-top));
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	
	.main {
		overflow: hidden;
		flex: 1;
	}
}
.items{
	padding: 32rpx;
	box-sizing: border-box;
	.title{
		font-size: 30rpx;
		color: #1C274C;
		font-weight: bold;
	}
	.item{
		width: 686rpx;
		margin: 0 auto;
		background: #FBFBFE;
		border-radius: 20rpx;
		margin-top: 30rpx;
		.top_box{
			width: 686rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 32rpx;
			box-sizing: border-box;
			.address{
				font-size: 26rpx;
				font-weight: 600;
				color: #1C274C;
			}
			.name{
				font-size: 26rpx;
				color: #ADB1BF;
				margin-top: 20rpx;
			}
		}
		.bottom_box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 32rpx;
			.l{
				font-size: 24rpx;
				color: $uni-primary;
			}
			.r{
				// display: flex;
				// align-items: center;
				// font-size: 24rpx;
				// color: #8D93A5;
				
				// width: 120rpx;
				// height: 50rpx;
				background-color: #FFFFFF;
				// line-height: 50rpx;
				padding: 8rpx 30rpx;
				
				text-align: center;
				font-size: 24rpx;
				color: $uni-primary;
				border-radius: 25rpx;
					
				image{
					width: 8rpx;
					height: 15rpx;
					margin-left: 15rpx;
				}
			}
		}
	}
}
.def{
	.item{
		background: $uni-primary;
		.bottom_box{
			.l{
				color: #fff !important;
			}
			.r{
				color: #fff !important;
			}
		}
	}
}
</style>
